<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin:  0px;
			}
			body{
				height: 100%;
				overflow: hidden;
				background-image: url(img/2017-04-07_120109.png);
			}
			.imgdiv {
				width: 222px;
				height: 222px;
				position: absolute;
			}
			
			.imgdiv img {
				position: absolute;
			}
		</style>
	</head>

	<body>
		<!--<div class="imgdiv">
			<img src="../img/ch0.png" style="opacity: 0.2;"/>
			<img src="../img/ch1.png" style="opacity: 0.6;"/>
			<img src="../img/ch2.png" style="opacity: 0.9;"/>
		</div>-->
		<script type="text/javascript">
			function creatImg() {
				var div = document.createElement("div");
				div.className = "imgdiv";
				div.style.top = "5px";
				div.style.left = "8px";
				div.setAttribute("data-rotx",parseInt(Math.random()*15)+5);
				div.setAttribute("data-roty",parseInt(Math.random()*15)+5);
				for(var k = 0; k < 4; k++) {
					var img = document.createElement("img");
					img.src = "img/ch" + k + ".png";
					div.appendChild(img);
					if(k!=3){
						img.style.opacity = Math.random();
					}
				}
				document.body.appendChild(div);
			}

			var imgNum = 0;
			var id = setInterval(function() {
				creatImg();
				imgNum++;
				if (imgNum == 6) {
					clearInterval(id);
				}
			}, 2000);

			setInterval(function() {
				moveImg();
			}, 50);
			
			function moveImg() {
				var divs = document.getElementsByTagName("div");
				var Height = document.documentElement.clientHeight;
				var Width = document.documentElement.clientWidth;
				for (var i=0;i<divs.length;i++) {
					var rotx = parseInt(divs[i].getAttribute("data-rotx"));
					var roty = parseInt(divs[i].getAttribute("data-roty"));
					var top = parseInt(divs[i].style.top);
					var left = parseInt(divs[i].style.left);
					
					top += roty;
					left += rotx;
					divs[i].style.top = top +"px";
					divs[i].style.left = left +"px";
					
					if (top>Height-222) {
						roty = -roty;
						setImgOpacity(divs[i]);
						divs[i].style.top = (Height-222) +"px";
					}
					
					if (top<=0) {
						roty = -roty;
						setImgOpacity(divs[i]);
						divs[i].style.top = "0px";
					}
					
					if (left>Width-222) {
						rotx = -rotx;
						setImgOpacity(divs[i]);
						divs[i].style.left = (Width-222) +"px";
					}
					
					if (left<=0) {
						rotx = -rotx;
						setImgOpacity(divs[i]);
						divs[i].style.left = "0px";
					}
					
					
					divs[i].setAttribute("data-rotx",rotx);
					divs[i].setAttribute("data-roty",roty);
				}
			}
			
			function setImgOpacity(div) {
				var imgs = div.getElementsByTagName("img");
				for (var i = 0; i < imgs.length-1; i++) {
					imgs[i].style.opacity = Math.random();
				}
			}
		</script>
	</body>

</html>